Просмотр полной версии : Непойму в чем разница в коде
В IE так вот работает:
var a = NN.childNodes; var l = a.length;
for (var i = 0; i < l; i++) insobj.appendChild(a[0]);
А вот так не работает:
var a = NN.childNodes; var l = a.length;
for (var i = 0; i < l; i++) insobj.appendChild(NN.childNodes[0]);
Всем остальным браузерам фиолетово как написано.
В чем тут грабля расскажите пожалуйста.
Лично я когда добавляю что-то в структуру документа
сначала этот элемент создаю методами document.createElement
или узел.cloneNode(глубина) и др.
Вы же в appendChild помещаете ссылку на уже находящийся в структуре
DOM элемент и оставляете все проблемы решать браузеру. И у
браузеров на такой случай наверное разные методы решения и если
понимают по разному - то тут ничего странного.
Adds the node newChild to the end of the list of children of this node. If the newChild is already in the tree, it is first removed. (http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html#ID-184E7107)
в общем в стандарте этот пункт предусмотрен
NT Man, что значит не работает? Ошибки возникают?
NT Man, что значит не работает? Ошибки возникают?
Нет никаких ошибок. Если кому интересно, чтоб было понятно о чем речь вот конкретная дрозофилка. Смотрим что получается в IE потом комментируем две строчки под комментарием "Рабочий пример." и раскомментируем две строчки под комментарием не рабочий пример снова смотрим :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег SELECT</title>
<script>
function ggg() {
var to = document.getElementById("bbb");
var from = document.createElement('p');
from.innerHTML = '<select><option value="1">Чебурашка</option><option selected value="2">Крокодил Гена</option><option value="3">Шапокляк</option><option value="4">Крыса Лариса</option></select>';
while (to.firstChild) to.removeChild(to.firstChild);
// Рабочий пример.
var a = from.firstChild.childNodes; var l = a.length;
for (var i = 0; i < l; i++) to.appendChild(a[0]);
// Не рабочий пример только для IE
// var a = from.firstChild; var l = a.childNodes.length;
// for (var i = 0; i < l; i++) to.appendChild(a.childNodes[0]);
}
</script>
</head>
<body>
<form action="select1.php" method="post">
<p><select id="bbb" name="hero"></select></p>
</form>
<input type="button" value="ins select" onclick="ggg()"/>
</body>
</html>
Почему не так?
while (from.firstChild) to.appendChild(from.firstChild)
Почему не так?
while (from.firstChild) to.appendChild(from.firstChild)
Замечательно у нас теперь два нерабочих примера!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег SELECT</title>
<script>
function ggg() {
var to = document.getElementById("bbb");
var temp = document.createElement('p');
temp.innerHTML = '<select><option value="1">Чебурашка</option><option selected value="2">Крокодил Гена</option><option value="3">Шапокляк</option><option value="4">Крыса Лариса</option></select>';
from = temp.firstChild;
while (to.firstChild) to.removeChild(to.firstChild);
// Рабочий пример.
var a = from.childNodes; var l = a.length;
for (var i = 0; i < l; i++) to.appendChild(a[0]);
// Не рабочий пример только для IE
// var a = from; var l = a.childNodes.length;
// for (var i = 0; i < l; i++) to.appendChild(a.childNodes[0]);
// Еще один не рабочий пример только для IE
// while (from.firstChild) to.appendChild(from.firstChild);
}
</script>
</head>
<body>
<form action="select1.php" method="post">
<p><select id="bbb" name="hero"></select></p>
</form>
<input type="button" value="ins select" onclick="ggg()"/>
</body>
</html>
Замечательно у нас теперь два нерабочих примера!
Шеф, усё работает! Что я делаю не так? ;)
Шеф, усё работает! Что я делаю не так? ;)
Что по умолчанию выходит? Правильный ответ "Корокодил Гена", а не "Крыса Лариса" :)
приведу свой вариант
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег SELECT</title>
<script>
function ggg() {
var to = document.getElementById("bbb");
var div = document.createElement('div');
div.innerHTML = '<select><option selected>1 selected</option><option>2</option></select>';
var opt1 = document.createElement('option'),
opt2 = document.createElement('option'),
select = document.createElement('select');
opt1.innerHTML = '1 selected';
opt1.selected = true;
opt2.innerHTML = '2';
select.appendChild( opt1 );
select.appendChild( opt2 );
var children = div.firstChild.childNodes;
while( children.length )
{ alert( children[0].innerHTML+', '+
children[0].selected );
to.appendChild( children[0] );
}
}
</script>
</head>
<body>
<form action="select1.php" method="post">
<p><select id="bbb" name="hero"></select></p>
</form>
<input type="button" value="ins select" onclick="ggg()"/>
</body>
</html>
если обращаться к option через children, то текущим становится выбранный пункт. Если же через div.firstChild.childNodes - последний. Можно даже добавить больше пунктов, чтобы проверить. Но не забываем что при appendChild option'ы удаляются из исходного select'а, значит один из вариантов поведения: в исходном select должен меняться текущий option (при удалении текущего). Но ie идет дальше (либо так изначально задумывалось, либо они пофиксили свое поведение), если мы обращаемся к appendChild через ссылку на childNodes, значит мы обходим всех детей select (менять текущий пункт не надо), если же через childNodes - значит мы хотим просто извлечь отдельный пункт
p.s. зацените теорию ;)
Да, заценил ;) Правда, мне снятие selected представляется вполне логичным. FF 3.0.14 -- Во всех вариантах Крыса Лариса; Опера 9.64 -- во всех вариантах Крокодил Гена, ИЕ8 -- 1й Крокодил, дальше Крыса. Имеет ли смысл рассчитывать на что-то в таком случае?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег SELECT</title>
<script type="text/javascript">
function ggg(k) {
var to = document.getElementById("bbb");
var temp = document.createElement('p');
temp.innerHTML = '<select><option value="1">Чебурашка</option><option selected value="2">Крокодил Гена</option><option value="3">Шапокляк</option><option value="4">Крыса Лариса</option></select>';
from = temp.firstChild;
while (to.firstChild) to.removeChild(to.firstChild);
switch (k) {
case 1:
// Рабочий пример.
var a = from.childNodes; var l = a.length;
for (var i = 0; i < l; i++) to.appendChild(a[0]);
break;
case 2:
// Не рабочий пример только для IE
var a = from; var l = a.childNodes.length;
for (var i = 0; i < l; i++) to.appendChild(a.childNodes[0]);
break;
case 3:
// Еще один не рабочий пример только для IE
while (from.firstChild) to.appendChild(from.firstChild);
break;
}
}
</script>
</head>
<body>
<form action="/" method="post">
<p><select id="bbb" name="hero"></select></p>
<input type="button" value="ins select v1" onclick="ggg(1)" />
<input type="button" value="ins select v2" onclick="ggg(2)" />
<input type="button" value="ins select v3" onclick="ggg(3)" />
</form>
</body>
</html>
Имеет ли смысл рассчитывать на что-то в таком случае?
а почему нет: либо делай ссылку на childNodes, либо явно выбирай option в конце
Имеет ли смысл рассчитывать на что-то в таком случае?
Для меня да. Т.к. приведенная здесь вырезка кода предназначается сугубо для IE.
x-yuri,
так не помогает делать ссылку на childNodes -- FF на это не ведется :)
Так что вариант:
var ind = from.selectedIndex;
while (from.firstChild) to.appendChild(from.firstChild);
to.selectedIndex = ind;
мне нравится больше всего.
vBulletin® v3.6.7, Copyright ©2000-2025, Jelsoft Enterprises Ltd. Перевод: zCarot